import React, {
    ReactNode,
    useMemo,
    useState,
  } from "react";
  import styled from "styled-components";
  import { color } from "../shared/styles";
  import { Pagination } from "../pagination";
  import { Icon } from "../icon/icon"
  
  const TableTable = styled.table`
      width: 100%;
      text-align: left;
      border-radius: 2px 2px 0 0;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: auto;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.65);
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum";
      position: relative;
      z-index: 0;
      clear: both;
      font-size: 14px;
      background: #fff;
      border-radius: 2px;
      & > thead > tr > th {
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          text-align: left;
          background: #fafafa;
          border-bottom: 1px solid #f0f0f0;
          transition: background 0.3s ease;
          position: relative;
          padding: 16px;
          overflow-wrap: break-word;
      }
      & > tbody > tr {
          & > td {
              border-bottom: 1px solid #f0f0f0;
              transition: background 0.3s;
              position: relative;
              padding: 16px;
              overflow-wrap: break-word;
          }
          &:hover {
              & > td {
                  background: #fafafa;
              }
          }
      }
  `;
  
  const TableHeadSpan = styled.span`
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      padding: 16px;
      cursor: pointer;
      & svg {
          height: 10px;
          width: 10px;
      }
  `;
  
  export interface SourceDataType {
    key: string;
    [key: string]: any;
  }
  
  export interface ColumnType {
    title: ReactNode;
    /** 排序等操作用来代替这列的 */
    dataIndex: string;
    sorter?: {
      compare: (a: SourceDataType, b: SourceDataType) => number;
    };
    render?: (v: any, value: SourceDataType, rowData: ColumnType) => ReactNode;
  }
  
  const MapData = (data: SourceDataType[], columnData: ColumnType[]) => {
    return data.map((v) => {
      return (
        <tr key={v.key}>
          {columnData.map((value, index) => {
            return (
              <td key={index}>
                <span>
                  {value.render
                    ? value.render(v[value.dataIndex], v, value)
                    : v[value.dataIndex]}
                </span>
              </td>
            );
          })}
        </tr>
      );
    });
  };
  
  export type TableProps = {
    /** 表内数据部分 */
    data: SourceDataType[];
    /** 表头部分*/
    columns: ColumnType[];
    /** 是否开启排序 */
    sorted?: boolean;
    /** 是否开启页码 */
    pagination?: boolean;
    /** 开启页码时才有效，设置每页显示几个*/
    pageSize?: number;
  }
  
  export function Table(props: TableProps) {
    const { data, columns, pageSize, pagination, sorted } = props;
    const [columnData, setColumnData] = useState<ColumnType[]>([]);
    const [sourceData, setSourceData] = useState<SourceDataType[]>([]);
    const [paginationData, setPaginationData] = useState<SourceDataType[][]>([]);
    const [sortedData, setSortedData] = useState<SourceDataType[]>([]);
    const [filterState, setFilterState] = useState<number[]>([]);//记录第几列开启筛选
    const [current, setCurrent] = useState(0); //这个是paginationData的索引
    const originPagination = useMemo(() => {
      return (data: SourceDataType[]) => {
        let tmp: SourceDataType[][] = [];
        let len = data.length;
        let pagenumber = Math.ceil(len / pageSize!); //页数
        for (let i = 0; i < pagenumber; i++) {
          //每页该显示多少内容做好。
          tmp[i] = data.slice(
            0 + i * pageSize!,
            pageSize! + i * pageSize!
          );
        }
        setPaginationData(tmp);
      };
    }, [pageSize]);
  
    const totalColumn = useMemo(() => {
      //表头总长
      setColumnData(columns); //表头拿来渲染
      setFilterState(new Array(columns.length).fill(0));//初始化排序数据
      return columns.length;
    }, [columns]);
  
    const totalLen = useMemo(() => {
      //内容部分总长
      setSourceData(data); //数据
      if (pagination) {
        //分页走paginationData
        originPagination(data);
      }
      return data.length;
    }, [data, originPagination, pagination]);
  
    const renderData = useMemo(() => {
      //内容部分渲染
      let render;
      if (pagination && paginationData.length !== 0) {
        //如果分页，渲染分页
        render = MapData(paginationData[current], columnData);
      } else {
        //否则直接渲染
        if (sortedData.length === 0) {
          render = MapData(sourceData, columnData);
        } else {//如果排序有数据，就按排序渲染
          render = MapData(sortedData, columnData);
        }
      }
      return render;
    }, [columnData, current, pagination, paginationData, sortedData, sourceData]);
  
    return (
      <div>
        <TableTable>
          <thead>
            <tr>
              {columnData.map((v, i) => {
                return (
                  <th key={i}>
                    <span>{v.title}</span>
                    {
                      v.sorter && sorted && v.sorter.compare && (
                        <TableHeadSpan
                          onClick={() => {
                            if (filterState[i]) {
                              //如果已经开启了排序
                              //查看是不是1，如果为1，进行逆序排序，否则清空
                              if (filterState[i] === 1) {
                                let res = sourceData
                                  .slice()
                                  .sort(
                                    (a, b) =>
                                      -v.sorter!.compare(
                                        a,
                                        b
                                      )
                                  ); //数据传给compare
                                let newfilter = new Array(
                                  totalColumn
                                ).fill(0);
                                newfilter[i] = 2;
                                setSortedData(res);
                                setFilterState(
                                  newfilter
                                );
                              } else {
                                setSortedData([]); //清空排序数据
                                if (pagination) {
                                  originPagination(
                                    data
                                  );
                                }
                                filterState[i] = 0;
                                setFilterState([
                                  ...filterState,
                                ]);
                              }
                            } else {
                              //没有开启就开启排序
                              let res = sourceData
                                .slice()
                                .sort(
                                  v.sorter!.compare
                                ); //数据传给compare
                              let newfilter = new Array(
                                totalColumn
                              ).fill(0);
                              newfilter[i] = 1;
                              setSortedData(res);
                              setFilterState(newfilter);
                            }
                          }}
                        >
                          <Icon
                            icon="arrowup"
                            block
                            color={
                              filterState[i] === 1
                                ? color.primary
                                : color.dark
                            }
                          ></Icon>
                          <Icon
                            icon="arrowdown"
                            block
                            color={
                              filterState[i] === 2
                                ? color.primary
                                : color.dark
                            }
                          ></Icon>
                        </TableHeadSpan>
                      )
                    }
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>{renderData}</tbody>
        </TableTable>
        {
          pagination && (
            <Pagination
              style={{ justifyContent: "flex-end" }}
              total={totalLen}
              pageSize={pageSize}
              callback={(v) => setCurrent(v - 1)}
              defaultCurrent={1}
            ></Pagination>
          )
        }
      </div>
    );
  }
  
  Table.defaultProps = {
    sorted: false,
    pagination: false,
    pageSize: 10
  };